import {Component, OnInit} from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-commodity-specification',
  templateUrl: './commodity-specification.component.html',
  styleUrls: ['./commodity-specification.component.scss']
})
export class CommoditySpecificationComponent implements OnInit {
  texture: any[] = [];
  color: any[] = [];
  listOfData: any[] = [];

  drop(event: any) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
    this.refreshTable();
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  save() {
    console.log(this.texture);
  }

  removeTexture(index: number) {
    this.texture.splice(index, 1);
    this.refreshTable();
  }

  appendTexture() {
    console.log('添加材质');
    this.texture.push({value: ''});
    this.refreshTable();
  }

  removeColor(index: number) {
    this.color.splice(index, 1);
    this.refreshTable();
  }

  refreshTable() {
    this.listOfData = [];
    this.texture.forEach(t => {
      this.color.forEach(c => {
        this.listOfData.push({
          texture: t.value,
          length: this.listOfData.some((l: { texture: string; }) => l.texture === t.value) ? 0 : this.color.length,
          color: c.value,
          specification: '0',
          status: 0
        });
      });
    });
  }

  appendColor() {
    console.log('添加颜色');
    this.color.push({value: ''});
    this.refreshTable();
  }
}
